<template>
  <!-- 题库批量更换章节 -->
  <el-dialog :visible.sync="localVisible" :title="title" width="500px" @close="handleClose"
    :close-on-click-modal="false" append-to-body>
    <div class="dialog-content">
      <el-form label-width="120px" :model="form" ref="addObject">
        <el-form-item prop="fk_t_sctk_chapter_id" label="">
          <el-select v-model="form.fk_t_sctk_chapter_id" placeholder="请选择" class="title-button" size="mini">

            <el-option v-for="item in flatChapters" :key="item.id" :label="item.name" :value="item.id">
              <span :style="{ paddingLeft: item.level * 20 + 'px' }">{{ item.name }}</span>
            </el-option>

          </el-select>
          <el-button size="mini" type="primary" @click="editChapter">编辑章节</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="mini" @click="btnOk">确定</el-button>
          <el-button size="mini" @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
      <update-chapter v-if="fk_t_sctk_id !== null" :show-dialog.sync="updateChapterShowDialog"
        :title="updateChapterdialogTitle" :fk_t_sctk_id="fk_t_sctk_id" :chapters="chapters"
        @chapter-updated="getChapters"></update-chapter>
    </div>
  </el-dialog>
</template>

<script>
import { getSctktChapterList } from '@/api/sctkChapter'
import { batchUpdateChapter } from '@/api/quesstionBank';
import { transListToTreeDataOnChapter } from '@/utils'
import updateChapter from '@/components/updateChapter'
export default {
  name: 'batchUpdateChapter',
  components: {
    updateChapter
  },

  props: {
    showDialog: {
      type: Boolean,
      default: false,
      required: true
    },
    title: {
      type: String,
      default: '批量更换章节'
    },
    ids: {
      type: Array,
      required: true
    },
    fk_t_sctk_id: {
      type: Number,
      required: true
    }
  },
  computed: {
    // 将嵌套数据转换为扁平数组
    flatChapters() {
      const result = [];

      function flatten(items, level = 0) {
        for (const item of items) {
          const newItem = { ...item, level }; // 添加层级信息
          result.push(newItem);
          if (item.children && item.children.length > 0) {
            flatten(item.children, level + 1); // 递归处理子级
          }
        }
      }

      flatten(this.chapters); // 开始扁平化处理
      return result;
    }
  },
  created() {
    this.getChapters();
  },
  data() {
    return {
      localVisible: this.showDialog,
      chapters: [

      ],
      form: {
        fk_t_sctk_chapter_id: ''
      },
      updateChapterShowDialog: false,
      updateChapterdialogTitle: '编辑章节'
    };
  },
  watch: {
    showDialog(newVal) {
      this.localVisible = newVal;
    },
    localVisible(newVal) {
      if (newVal !== this.showDialog) {
        this.$emit('update:showDialog', newVal);
      }
    },
    updateChapterShowDialog(newVal) {
      if (!newVal) {
        this.getChapters(); // 当子弹窗关闭时刷新章节列表
      }
    }
  },
  methods: {

    async getChapters() {
      let result = await getSctktChapterList({ fk_t_sctk_id: this.fk_t_sctk_id })
      // 递归处理
      this.chapters = transListToTreeDataOnChapter(result, 0)

    },
    handleClose() {
      this.localVisible = false;
    },
    // 编辑章节
    editChapter() {
      this.updateChapterShowDialog = true
      this.updateChapterdialogTitle = '编辑章节'

    },
    btnOk() {
      this.$refs.addObject.validate(async isOk => {
        if (isOk) {
          console.log('111', this.ids);

          const queryParams = { ids: this.ids, fk_t_sctk_id: this.fk_t_sctk_id, fk_t_sctk_chapter_id: this.form.fk_t_sctk_chapter_id }
          await batchUpdateChapter(queryParams)
          // 通知父组件更新
          this.$emit('submit')
          //成功提示
          this.$message.success(`批量更换章节成功`)
          //重置表单
          this.handleClose()
        }
      })
    },
  }
};
</script>

<style scoped>
.dialog-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chapter-container {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 10px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.button-wrapper {
  text-align: center;
  margin-top: 10px;
}

/* 新增样式 */
.el-input {
  width: 200px;
  /* 调整输入框宽度 */
}

.el-button {
  margin-left: 5px;
  /* 调整按钮间距 */
}

.el-tree-node__content {
  width: 100%;
  /* 让节点内容占据整个容器宽度 */
}

/* 在编辑模式下进一步调整节点内容的布局 */
.custom-tree-node.editing .el-tree-node__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 确保输入框和按钮在同一行显示 */
.custom-tree-node.editing .el-input {
  width: calc(100% - 200px);
  /* 根据需要调整宽度 */
  margin-right: 10px;
  /* 给右侧按钮留出空间 */
}

.edit-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.button-group {
  display: flex;
  align-items: center;
}

.button-group .el-button {
  margin-left: 5px;
  /* 调整按钮间距 */
}
</style>